<template>
  <div>
    <div class="line">
      <span>|</span>
      <span>水肥机</span>
    </div>
    <div class="content">
      <el-card v-for="(item,index) in operations" :key="index" class="card">
        <div class="content-image">
          <i class="el-icon-set-up" />
        </div>
        <div class="middle">
          {{ item.remoteControlDeviceName }}
        </div>
        <div class="foot">
          <el-switch
            v-model="item.remoteStatus"
            active-value="开启"
            inactive-value="关闭"
            :width="60"
            active-color="#13ce66"
            inactive-color="#909399"
            @change="changeControl(index)"
          />
        </div>
      </el-card>
    </div>
  </div>

</template>

<script >
import { getStudentControl, getTeacherControl } from '@/api/operation'
import { postControlStatus } from '@/api/operation'

export default {
  data() {
    return {
      role: '', // 查看老师还是学生
      operations: []
    }
  },
  created() {
    this.role = this.$store.getters.roles[0]
    const Id = this.$store.getters.id
    const ControlData = {
      Id: 'jiang'
      // Id: Id,
    }
    if (this.role == 'student') {
      getStudentControl(ControlData).then(res => {
        this.operations = res.data.records
      })
    } else {
      getTeacherControl(ControlData).then(res => {
        this.operations = res.data.records
      })
    }
  },
  methods: {
    newfetch() {
      const Id = this.$store.getters.id
      const ControlData = {
        Id: 'jiang'
        // Id: Id,
      }
      if (this.role == 'student') {
        getStudentControl(ControlData).then(res => {
          this.operations = res.data.records
        })
      } else {
        getTeacherControl(ControlData).then(res => {
          this.operations = res.data.records
        })
      }
    },
    changeControl(index) {
      console.log(this.operations[index])
      const changeControlData = {
        controlInteractionId: this.operations[index].controlInteractionId,
        remoteStatus: this.operations[index].remoteStatus
      }
      console.log(changeControlData)
      postControlStatus(changeControlData).then(res => {
        console.log(res)
        this.newfetch()
      })
    }
  }
}

</script>

<style scoped>

.line{
    width: 100%;
    color: #345E8F;
    font-size: 16px;
    margin-bottom: 1%;
}
span:first-child{
    font-weight: bold;
    margin-right: 1%;
    font-size: 18px;
}
.top{
  margin: 1%;
}
.content{
    margin-top: 1%;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    flex-wrap: wrap;
  }
  .card{
    width: 15%;
    height: 150px;
    /* border: 1px solid #ccc; */
    cursor: pointer;
    margin: 0.5%;
  }
  .middle{
    display: flex;
    flex-direction: column;
    align-items: center;
    clear: both;
    margin-top: 1%;
    font-size: 20px;
  }
  .foot{
    margin-top: 2%;
    text-align: center;
  }
  .content-image{
    text-align: center;
    font-size: 50px;
  }
</style>
